<template>
  <baidu-map
    :center="center"
    :zoom="zoom"
    @ready="handler"
    style="width: 100%; height: 1000px"
  >
    <bm-marker
      :position="{ lng: 120.19437, lat: 30.20492 }"
      :dragging="false"
      animation="BMAP_ANIMATION_BOUNCE"
      :icon="{
        url: require('/src/assets/img/已点亮.png'),
        size: { width: 200, height: 157 },
      }"
      @click="isclick"
    ></bm-marker>
    <bm-marker
      :position="{ lng: 120.20017, lat: 30.20402 }"
      :dragging="false"
      animation="BMAP_ANIMATION_BOUNCE"
      :icon="{
        url: require('/src/assets/img/已点亮.png'),
        size: { width: 200, height: 157 },
      }"
      @click="isclick"
    ></bm-marker>
    <bm-marker
      :position="{ lng: 120.19897, lat: 30.19862 }"
      :dragging="false"
      animation="BMAP_ANIMATION_BOUNCE"
      :icon="{
        url: require('/src/assets/img/已点亮.png'),
        size: { width: 200, height: 157 },
      }"
      @click="isclick"
    ></bm-marker>
    <bm-marker
      :position="{ lng: 120.20017, lat: 30.21092 }"
      :dragging="false"
      animation="BMAP_ANIMATION_BOUNCE"
      :icon="{
        url: require('/src/assets/img/已点亮.png'),
        size: { width: 200, height: 157 },
      }"
      @click="isclick"
    ></bm-marker>
    <bm-marker
      :position="{ lng: 120.19117, lat: 30.19892 }"
      :dragging="false"
      animation="BMAP_ANIMATION_BOUNCE"
      :icon="{
        url: require('/src/assets/img/未点亮.png'),
        size: { width: 200, height: 157 },
      }"
    ></bm-marker>
    <bm-marker
      :position="{ lng: 120.19667, lat: 30.20892 }"
      :dragging="false"
      animation="BMAP_ANIMATION_BOUNCE"
      :icon="{
        url: require('/src/assets/img/未点亮.png'),
        size: { width: 200, height: 207 },
      }"
    ></bm-marker>
    <bm-marker
      :position="{ lng: 120.19467, lat: 30.20042 }"
      :dragging="false"
      animation="BMAP_ANIMATION_BOUNCE"
      :icon="{
        url: require('/src/assets/img/未点亮.png'),
        size: { width: 200, height: 207 },
      }"
    ></bm-marker>
  </baidu-map>
</template>

<script>
export default {
  name: "APP",
  data() {
    return {
      map: null,
      center: {
        lng: 120.21937,
        lat: 30.25924,
      },
      zoom: 15,
    };
  },
  methods: {
    handler({ BMap, map }) {
      this.map = map; //把map赋值给变量map
      this.map.centerAndZoom(new BMap.Point(120.19347, 30.20282), 16); //修改中心点，缩放比例
      this.map.enableScrollWheelZoom(true); //添加鼠标滚动，地图缩放组件
      map.enableDragging(); //启用地图拖拽，默认启用
      map.enableInertialDragging(true); // 启用地图惯性拖拽，默认禁用。
      map.enableContinuousZoom(true); // 启用连续缩放效果，默认禁用。
      map.enablePinchToZoom(true); //启用双指操作缩放，默认启用。
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    },
    isclick() {
      this.$router.push({ path: "./home" });
    },
  },
};
</script>
<style>
body {
  margin: 0;
  padding: 0;
}
img {
  width: 60px;
  height: 80px;
}
</style>